<template>
  <el-table
    :data="versionData"
    style="width: 100%"
    border
    header-row-class-name="versionTableHeader"
    :cell-style="{padding:0,height:'36px','text-align': 'center'}">
    <el-table-column
      prop="name"
      label="模块名称">
    </el-table-column>
    <el-table-column
      prop="v1"
      label="旗舰版">
      <template slot-scope="scope">
        <img src="../../../assets/img/login/icon/345_05.png" v-if="scope.row.v1">
        <img src="../../../assets/img/login/icon/345_03.png" v-else>
      </template>
    </el-table-column>
    <el-table-column
      prop="v2"
      label="专业版">
      <template slot-scope="scope">
        <img src="../../../assets/img/login/icon/345_05.png" v-if="scope.row.v2">
        <img src="../../../assets/img/login/icon/345_03.png" v-else>
      </template>
    </el-table-column>
    <el-table-column
      prop="v3"
      label="企业版">
      <template slot-scope="scope">
        <img src="../../../assets/img/login/icon/345_05.png" v-if="scope.row.v3">
        <img src="../../../assets/img/login/icon/345_03.png" v-else>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    versionData: {
      type: Array,
      default: []
    }
  }
}
</script>

<style scoped>
img {
  margin-top: 8px;
}
.el-table>>> .versionTableHeader th {
  padding: 0;
  text-align: center;
}
.el-table>>> .versionTableHeader th>.cell {
  line-height: 36px;
}
.el-table>>> .versionTableHeader th:nth-child(2)>.cell {
  color: #017aff!important;
  background-image: linear-gradient(to right, #E5F1FF, #B2D4FF);
}
.el-table>>> .versionTableHeader th:nth-child(3)>.cell {
  color: #997747!important;
  background-image: linear-gradient(to right, #F7DAA2, #F4CA74);
}
.el-table>>> .versionTableHeader th:nth-child(4)>.cell {
  color: #F6D9A1!important;
  background-image: linear-gradient(to right, #565656, #222);
}
</style>